import React,{Component} from 'react';
import { connect } from 'react-redux';
// import style from './styles.module.less';
import { Form, Input, Button, Upload, Table,Card,} from 'antd';
import { useForm } from 'antd/lib/form/Form';
import {SearchOutlined, DeleteOutlined, FileAddOutlined, DownloadOutlined,
  UploadOutlined, } from '@ant-design/icons';
import styles from './styles.module.less';


const itemStyle = {
  margin: ' 0 0.5rem 0.6rem' 
}

function RenderModal1(props) {
  // const { record, modelVisible, cancle , onOk} = props;
  console.log(props)
  const [form] = useForm();
  return(
    <Form name='form-updata-first' form={form} onFinish={(value) => {console.log("value",value)}}>
        <Form.Item name='multipartFile'>
        <Upload itemRender={() => null} beforeUpload={() => {
          form
          .validateFields()
          .then((values) => {
            // console.log(values)
            console.log(values)
            props.uploadFile({
              grade:values.grade,
              multipartFile:values.multipartFile.file
            })
            // onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
          return false
        }}>
          <Button icon={<UploadOutlined />}>导入矩阵</Button>
        </Upload>
        </Form.Item>
      </Form>
  )
}

class MatrixManage extends Component {
  componentDidMount(){
    this.props.getHeader({})
    this.props.getList({})
  }
  headerProcess(headerList){
    const result = headerList.map(first => {
      return {
        title:first.firstRequirementNo,
        children:first.requirementVOAttacheds.map(item => {
          return {
            title:item.secondRequirementNumber,
            dataIndex:`${item.secondRequirementId}`,
            key:`${item.secondRequirementId}`,
            align:'center',
            width:"50px"
          }
        })
      }
    })
    console.log("result",result)
    result.unshift(...[
      {
        title:"类别名",
        dataIndex:"typeName",
        key:'typeName',
        fixed: 'left',
        align:'center',
        width:"100px",
      },
      {
        title:"课程名",
        key:'courseName',
        dataIndex:"courseName",
        fixed: 'left',
        width:"100px",
        align:'center',
      },
      {
        title:"学分",
        key:'credit',
        dataIndex:"credit",
        fixed: 'left',
        width:"50px",
        align:'center',
        },
    ])
    return result
  }
  listProcess(list){
    const result = list.map(item => {
      let pointObj = {}
      item.coursePointVOS.map(item => {
        pointObj[`${item.secondRequirementId}`] = item.weight
      }) 
      return {
        courseName:item.course.name,
        typeName:item.type.name,
        credit:item.course.credit,
        ...pointObj
      }
    })
    return result
  }
  render(){
    const {store} = this.props
    console.log(store)
    const columns = this.headerProcess(store.headerList)
    // console.log('columns',columns)
    const data = this.listProcess(store.list)
    console.log(data)
    return(
      <div>
        <Card title = {
        <div className = { styles.tableOptions }>
          <div style={itemStyle} className = {`${styles.inputItem}`} >
            <span>学号</span>
            <Input onChange={(e) => this.searchText.stuNo = e.target.value}/>
          </div>
          <div style={itemStyle} className = {`${styles.inputItem}`}>
            <span>姓名</span>
            <Input onChange={(e) => this.searchText.name = e.target.value}/>
          </div>
          <Button className={styles.normal} disabled={store.loading} icon={<SearchOutlined />} type='primary' style={itemStyle} onClick={this.search}>搜索</Button>
            
          <Button className={styles.normal} disabled={store.loading} icon={<DeleteOutlined />} type='primary' style={itemStyle} onClick={
            () => {
              this.searchText.name = ""
              this.searchText.stuNo = ""
              this.search()
            }
          }>清空搜索</Button>
          {RenderModal1&&<RenderModal1 uploadFile={this.props.uploadFile}></RenderModal1>}
          <Upload beforeUpload={(file) => {
            console.log(file)
            this.props.uploadFile({
              file:file
            })
            return false
          }}
            itemRender={() => null}
            disabled={store.loading}
          >
          </Upload>  
          <Button icon={<DownloadOutlined />} style={itemStyle}>下载模板</Button>
        </div>
      }>
        {/* <Test list = {store.list}/> */}
        <Table 
          // rowSelection={{
          //   selectedRowKeys: selectedRowKeys,
          //   ...this.rowSelection,
          // }}
          scroll={{ x: "1500" }}
          sticky
          size="small"
          bordered
          dataSource = {data}
          columns={columns}
          loading = {false}
          pagination = {false}
          loading = {store.loadingHeader || store.loadingList}

          // rowKey='stuId'
        />

      </Card>
        {/* {RenderModal1&&<RenderModal1 uploadFile={this.props.uploadFile}></RenderModal1>} */}
        
      </div>
    )
  }
}

const mapStateToProps = state => ({ store: state.mitrixManage })
const mapDispatchToProps = dispatch => ({
  uploadFile:dispatch.mitrixManage.uploadFile,
  getHeader:dispatch.mitrixManage.getHeader,
  getList:dispatch.mitrixManage.getList,
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MatrixManage);